<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import article from '@/api/article.js'

const navbarHeight = ref(0)
// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const state = reactive({
  id: 0,
  detail: {},
})

const getArticleDetail = () => {
  article
    .articleDetail({
      id: state.id,
    })
    .then((res) => {
      if (res.code == 1) {
        state.detail = res.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

onLoad((options) => {
  if (!options?.id) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.id = options.id
  getArticleDetail()
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      bg-color="transparent"
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    />
    <!-- 顶部导航栏背景动画 -->
    <view
      class="navbar-bg-animation"
      :style="{ height: `${navbarHeight}px` }"
    />
    <view
      class="article-detail-page"
      :style="{ paddingTop: `${navbarHeight + 10}px` }"
    >
      <!-- 文章内容 -->
      <view class="article-content">
        <view class="title">
          {{ state.detail?.title }}
        </view>
        <view class="top-container">
          <view class="">
            <view class=""> {{ state.detail?.update_date }} </view>
          </view>
          <view class="">
            <view> {{ state.detail?.look_num }} 人查看</view>
          </view>
        </view>

        <view class="content">
          <mp-html :content="state.detail?.content" />
        </view>
        <view class="bottom-container">
          <view
            v-if="state.detail?.source != ''"
            class="view-data tn-flex items-center"
          >
            <view class="view-count"> 来源：{{ state.detail?.source }} </view>
          </view>
        </view>
      </view>
    </view>

    <view class="operation-bar">
      <view class="news-bar">
        <view class="btn-container">
          <TnButton only-button open-type="share">
            <view class="btn tn-gradient-bg__cyan">
              <view class="text">分享好友</view>
              <view class="icon">
                <TnIcon name="share" />
              </view>
            </view>
          </TnButton>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/detail.scss';
</style>
